<html>
  <head>
    <link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet" />
    <link href="sea/index.css" rel="stylesheet" />
    <link href="forest/index.css" rel="stylesheet" />
    <link href="fantasy/index.css" rel="stylesheet" />
    <link href="city/index.css" rel="stylesheet" />

    <style>
      .player {
        margin: 5em auto;
        width: 500px;
      }
    </style>
  </head>

  <body>
    <div class="player">
      <h2>Sea</h2>
      <video
        id="sea-video"
        class="video-js vjs-theme-sea"
        controls
        preload="auto"
        poster="https://image.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3/thumbnail.jpg"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
          type="application/x-mpegurl"
        />
      </video>
    </div>

    <div class="player">
      <h2>Forest</h2>
      <video
        id="forest-video"
        class="video-js vjs-theme-forest"
        controls
        preload="auto"
        poster="https://image.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3/thumbnail.jpg"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
          type="application/x-mpegurl"
        />
      </video>
    </div>

    <div class="player">
      <h2>Fantasy</h2>
      <video
        id="fantasy-video"
        class="video-js vjs-theme-fantasy"
        controls
        preload="auto"
        poster="https://image.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3/thumbnail.jpg"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
          type="application/x-mpegurl"
        />
      </video>
    </div>

    <div class="player">
      <h2>Fantasy (Nyan)</h2>
      <video
        id="fantasy-video"
        class="video-js vjs-theme-fantasy nyan"
        controls
        preload="auto"
        poster="https://image.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3/thumbnail.jpg"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
          type="application/x-mpegurl"
        />
      </video>
    </div>

    <div class="player">
      <h2>City</h2>
      <video
        id="city-video"
        class="video-js vjs-theme-city"
        controls
        preload="auto"
        poster="https://image.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3/thumbnail.jpg"
        data-setup='{ "fluid": true }'
      >
        <source
          src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
          type="application/x-mpegurl"
        />
      </video>
    </div>

    <script src="https://vjs.zencdn.net/7.6.0/video.js"></script>
  </body>
</html>
